iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
佛心分享-IT 人自學之術

30天前端設計之旅系列 第 6

📅 第六天:讓數據更有條理——掌握表格設計技巧!

  • 分享至 

  • xImage
  •  

安扭哈誰呦~歡迎來到「30天前端設計之旅」的DAY 6!今天將學習使用表格來呈現結構化的數據。
表格在資訊的呈現方面非常有用。通過學習表格的格式和標示,將能設計出清淅明瞭的網頁表格。

為什麼表格如此重要呢?
在網頁設計中,表格是一種簡單而且有效的方式來呈現你想要呈現的數據。無論是產品價格、行程安排,還是統計數據,表格都能將大量資訊整理得井井有條。

D-6的學習目標:

  1. 創建基本表格:
    • 使用 table 標籤來創建表格。
    • 使用 tr(表格行)、td(表格資料)和 th(表格標題)標籤來定義表格內容。
  2. 表格格式設計:
    • 使用 bgcolor 標籤來指定背景的顏色。
    • 使用 background 標籤來指定背景的圖片。
    • 美化表格,添加邊框、背景色、對齊方式等格式,使表格看起來更整齊且美觀
  3. 表格標題與標示:
    • 使用 caption 來為表格提供標題。
    • 使用 thead(標頭)、tbody(內容) 和 tfoot(表尾) 來區分表格的不同部分。
    • 使用 scope 屬性來定義表格標題的作用範圍,從而增強無障礙性。
    • 合併表格 colspan(合併列) 和 rowspan(合併行)

提升可讀性與無障礙設計:學習如何正確標示表格元素,確保你的表格不僅對人類讀者友好,也對輔助技術(如屏幕閱讀器)友好。這能幫助你創建無障礙的網頁設計,讓每個人都能輕鬆訪問你的內容。

表格是讓數據井然有序的工具,好的表格能讓網頁更加容易閱讀!📊💡


上一篇
📅 第五天:圖片與書籤的魔法——讓網頁更生動!
下一篇
📅 第七天:讓網頁動起來——掌握HTML 5的多媒體影音!
系列文
30天前端設計之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言